<template>
	<view >
		<view class="main">
			<view class="swiper">
				<z-swiper v-model="list" :options="options">
				  <z-swiper-item :custom-style="{width:'550rpx',height:'339rpx'}" class="display-flex justify-center" v-for="(item,index) in list" :key="index">
				    <image class="image" src="/static/xhx.png" mode="aspectFill"> </image>
					<view class="mark">
						<view class="water-mark">
							<view class="school">{{item.name}}</view>
							<view class="info">
								<text>800人搜索过</text>
								<text>距您200m</text>
							</view>
						</view>
					</view>
				  </z-swiper-item>
				</z-swiper>
			</view>
				<scroll-view  class="goods " scroll-with-animation scroll-y :scroll-top="cateScrollTop" >
										<view class="category">
											<view class="items":key="key" >
												<!-- 商品 begin -->
												<view class="good" >
													<!-- <image src="https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/shop.png" class="image"></image> -->
													<view class="right">
														<text class="name">金桥慧景智慧托育园</text>
														<text class="tips">南昌市经开区GANOR佳诺国际金桥慧景婴幼中心，位于南昌经济开发区玉屏东大街777号金桥慧景33号楼104号，建筑面积623㎡，户外面积213.6㎡，共2层，设有5间托育教室，1间功能教室，设有乳儿班（0-12个月）、托小班（13-24个月）、托大班（25-36个月）、混龄班，以及亲子早教（4-42M），共计100个托位，员工26位。园区师生比1：5，所有教师均为大专及以上学历，持证上岗，师资主要来源师范院校早期教育、学前教育、心理学等专业毕业。采用小班制照护。以培育拥有生存力、学习力、幸福力的国际BABY为目标，提供全日托、半日制、计时托、临时托，供社区家长自由选择。2021年3月1日开始试开业。</text>
														<text class="name">公司介绍:</text>
														<text class="tips">
															经开区GANOR佳诺国际金桥慧景婴幼中心，是佳诺在南昌的第六家直营中心。以领先的智能化技术，同时根据0~3岁婴幼儿发展特点进行课程研发、婴幼儿照料和保育保健等相关体系的研发结合到信息化系统中去。托育互联网+行业信息全面管控，全面监管追溯；有效监管辖区内托育中心；将优质的课程和服务标准普惠普及到每一个适龄儿童；打造安全、健康的智慧托育中心环境，参与到行业标准的制定；将优秀课程和经验在线化，普惠到所有托育中心和老师，满足日益增长的专业照护师资要求。从总部运营、园区事务、孩子行为数据监测等进行大数据沉淀，自动化生成上百种报表，有效发现问题并高效决策。总部连锁智能化监控，协同各中心进行舆情预警、食品安全、业务数据、视频巡视、日常检查等信息全面监管追溯。以宝宝和家长为中心，围绕园长经营、老师工作、家长满意度、课程同步等全数字化运营管理系统。移动家园共育平台，周计划月计划、宝宝课程、宝宝食谱、班级相册，实现家园实时沟通，智能化数据一键触达。	
														</text>
														<view class="price_and_action">
															<view class="display-flex justify-between ">
																<text class="price">3000人搜索过</text>
																<text class="old-price">距离2.0km</text>
															</view>
															
														</view>
													</view>
												</view>
												<!-- 商品 end -->
											</view>
										</view>
									</scroll-view>
		</view>
		<u-picker :show="showShop" :columns="columns" @confirm="enter"></u-picker>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
	</view>
		
</template>

<script>
	import cityPicker from '@/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'
	export default {
		components:{
			cityPicker
		},
		data() {
			return {
				 columns: [
					['龙华校区', '盐田校区']
				 ],
				 showShop:false,
				 shopValue:'全部门店',
				options: {
					
					loop : true,
					autoplay:true,
					delay:2000,
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					coverflowEffect: {
						rotate: 50,
						stretch: 0,
						depth: 100,
						modifier: 1,
						slideShadows: true,
					},
				},
				list: [
						{
							name:'幼幼帮盐田校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},{
							name:'深圳市幼幼帮龙华校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},{
							name:'幼幼帮盐田校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},{
							name:'幼幼帮盐田校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},
						
							
				],
				value:false,
				input:'选择城市',
				 visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '420103',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				city:'选择城市',
				goods:[],
				cateScrollTop: 0,
			};
		},
		 onLoad() {
			 this.init()
		},
		methods: {
			async init(){
				this.goods = await this.$api('goods')
			},
			 open () {
					this.visible = true
				},
			confirm (val) {
				console.log(val)
				this.city = val.cityName
				this.input = val.provinceName + '-' + val.cityName + '-' + val.areaName
				this.visible = false
			},
			cancel () {
				this.visible = false
			},
			cityChange(e) {
				this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			enter(e) {
				console.log(e,'sss')
				this.showShop = false
				this.shopValue = e.value[0]
			},
			goDetail() {
				uni.navigateTo({
					url:'/pages/city/detail'
				})
			}
		}
		
	}
</script>

<style lang="scss">
	
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.search {
		width: 100%;
		height: 75rpx;
		background-color: #fefefe;
		padding: 5rpx 10rpx;
		
		.city {
			float: left;
			align-items: center;
			display: flex;
			font-size:32rpx;
			color:#444;
			vertical-align: middle;
			margin-right: 20rpx;
		}
		.shop {
			margin-top: 5rpx;
			float: left;
			align-items: center;
			display: flex;
			font-size: 30rpx;	
			color:#444;
			right: 0;
			vertical-align: middle;
		}
		.round {
			float: right;
			width: 220rpx;
		}
	}
	.map {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color:#333333;
		}
		.left {
			
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color:#333333;
		}
	}
	.swiper {
		margin-top: 15rpx;
		// width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.image {
			position: relative;
			width: 550rpx;
			height: 339rpx;
			border-radius: 28rpx;
			
		}
		.mark {
			position: absolute;
			background-color: rgba(0, 0, 0, 0.2);
			width: 550rpx;
			height: 339rpx;
			border-radius: 28rpx;
			color: white;
			.water-mark {
				position: absolute;
				bottom: 15rpx;
				width: 100%;
				.school {
					color: #fefefe;
					font-weight: bold;
					padding: 5rpx 48rpx 5rpx 32rpx;
					font-size: 26rpx;
				}
				.info {
					display: flex;
					justify-content: space-between;
					font-size: 22rpx;
					color: rgba(255, 255, 255, 1);
					padding: 0 48rpx 0 32rpx;
					margin-top: 10rpx;
					
				}
			}
		}
	}
	.shop-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		}
	.goods {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding: 20rpx 25rpx;
		// background-color: #ffffff;
		.category {
			width: 100%;
			padding-bottom:67px;
		}
		.items {
							display: flex;
							flex-direction: column;
							background-color: #FFFFFF;
							padding: 25rpx 15rpx;
							border-radius: 21rpx;
							margin-bottom: 20rpx;
							.good {
								// display: flex;
								align-items: center;
								margin-bottom: 30rpx;
								
								.image {
									width: 160rpx;
									height: 160rpx;
									margin-right: 20rpx;
									border-radius: 8rpx;
								}
			
								.right {
									flex: 1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: space-between;
									padding-right: 14rpx;
			
									.name {
										font-size: $font-size-base;
										margin-bottom: 10rpx;
									}
			
									.tips {
										width: 100%;
										font-size: $font-size-sm;
										color: $text-color-assist;
									}
			
									.price_and_action {
										width: 100%;
										margin-top: 10rpx;
										.price {
											color: rgba(153, 153, 153, 1);
											font-size: 22rpx;
										}
										.old-price {
											color: rgba(153, 153, 153, 1);
											font-size: 22rpx;
										}
										
									}
								}
							}
						}
		
	}
	
</style>
